<!--
 * @Author: Aaron Huang
 * @Date: 2021-11-27 11:49:17
 * @LastEditors: Aaron Huang
 * @LastEditTime: 2021-11-27 19:50:20
 * @Description: file content
 * @company: 沃尔玛
-->
<template>
  <el-popover
    v-model="visible"
    placement="bottom"
    width="160"
    trigger="click"
  >
    <el-checkbox-group v-for="(column,columnIndex) in configuration" :key="columnIndex" v-model="column.show">
      <el-checkbox :disabled="(column.disabled)" :label="column.name">{{ column.name }}</el-checkbox>
    </el-checkbox-group>
    <div class="btn">
      <el-button size="mini" type="primary" round @click="sava">保 存</el-button>
      <el-button size="mini" type="primary" round @click="reset">关 闭</el-button>
    </div>
    <i slot="reference" class="el-icon-set-up" />
  </el-popover>
</template>
<script>
export default {
  name: 'ConfigurationTableHead',
  props: {
    configuration: {
      type: Array,
      default: () => {
        return []
      }
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    resetTableHeadList() {
      this.$message({
        message: '保存成功',
        type: 'success'
      })
      this.$emit('changeHeadList')
    },
    sava() {
      const data = this.configuration.map(item => {
        return {
          value: item.value,
          show: item.show
        }
      })
      window.localStorage.setItem(this.type, JSON.stringify(data))
      this.visible = false
      this.resetTableHeadList()
    },
    reset() {
      this.visible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.btn{
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.el-icon-set-up{
  margin-left: 8px;
  font-size: 22px;
  color: #0071CE;
  cursor: pointer;
}
</style>
